<!--
    @作者：814878176@qq.com
    @时间：2020-03-30
    @描述：首页
	@使用："path": "pages/tabBar/home/home"
 -->
<template>
	<view class="home-wrappers" @click="goDetailPage()">
		<image class="uni-image" mode="widthFix" src="/static/home/bg_3.png" />
		<!-- 加载进度条 -->
		<view class="bar-wrapper">
			<view class="inwrapper" :style="'width:' + barWidth + '%'"></view>
			<text class="num">{{Math.round(barWidth) + '%'}}</text>
		</view>
		<view v-if="!showPage" class="bank-wrapper">
			<!-- <view class="bar-wrapper">
				<view class="inwrapper" :style="'width:' + barWidth + '%'"></view>
			</view> -->
		</view>
		<!-- 加载进入页面后，加载其他页面的背景图 -->
		<view v-if="showPage" v-show="false" class="">
			<!-- 点灯 -->
			<image class="uni-image img-bg" mode="widthFix" src="/static/home/bg_2.png" />
			<!-- 景点 -->
			<image class="uni-image img-bg" mode="widthFix" src="/static/activityTwo/bg_1.png" />
			<image class="uni-image view-bg" mode="widthFix" src="/static/activityTwo/map_bg_1.png" />
			<!-- 祭品 -->
			<image class="uni-image img-bg" mode="widthFix" src="/static/activityTwo/offerings_1.png" />
			<image class="uni-image img-bg" mode="widthFix" src="/static/activityTwo/offerings_2.png.png" />
			<!-- 舜帝祭祀 -->
			<image class="uni-image img-bg" mode="widthFix" src="/static/activityTwo/bg_2.png" />
			<image class="uni-image img-bg" mode="widthFix" src="/static/activityTwo/people.png" />
			<!-- 我的纪录 -->
			<image class="uni-image img-bg" mode="widthFix" src="/static/common/record_bg_1.png" />
			<image class="uni-image img-bg" mode="widthFix" src="/static/common/record_bg_2.png" />
			<image class="uni-image" mode="widthFix" src="/static/activityTwo/banner.png" />
			<!-- 人员分布 -->
			<image class="uni-image img-bg" mode="widthFix" src="/static/activityOne/distribute.png" />
			<!-- 海报 -->
			<image class="uni-image img-bg" mode="widthFix" src="/static/poser/poser_1.png" />
			<image class="uni-image img-bg" mode="widthFix" src="/static/poser/poser_2.png" />
			<image class="uni-image img-bg" mode="widthFix" src="/static/poser/poser_3.png" />
			<image class="uni-image img-bg" mode="widthFix" src="/static/poser/poser_4.png" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPage: false,
				barWidth: 10,
				barTimeIndex: 0
			}
		},
		onLoad() {
			if(!localStorage.getItem('token')){
				this.register();
			}
			clearTimeout(this.barTimeIndex);
			this.barTimeIndex = setTimeout(()=>{
				this.showPage = true;
				this.barWidth = 0;
				this.barTimeIndex = setInterval(()=>{
					this.barWidth = this.barWidth + 0.4;
					if(this.barWidth>=100) {
						clearInterval(this.barTimeIndex);
						this.goDetailPage();
					}
				},10)
			},500)
		},
		methods: {
			// 页面路由跳转
			goDetailPage() {
				uni.navigateTo({
					url: "/pages/home/homeNav"
				});
			},
			register() {
				this.$request({
					 method: "POST",
					 url: PATHAPI + '/register',
					 data: {},
					 success: (res) => {
						 if(res.data.status == 'success'){
							localStorage.setItem('token',res.data.data.token);
						 }else{
							 alert(res.data.message);
						 }
					 }
				});
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import "../../common/css/var.styl"   
	.home-wrappers {
		position: relative;
		height: 100%;
		.uni-image {
			height: 100% !important;
			vertical-align: middle;   /*去掉底部的白边*/
		}
		.router-btn {
			position: absolute;
			z-index: 99;
			top: 60%;
			SetCenterX();
			color: #333;
			font-size: 64upx;
			font-weight: bold;
		}
		.bar-wrapper {
			width: 60%;
			top: 78%;
			SetCenterX();
		}
	}
	
</style>
